<html>

<head>
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
  <meta http-equiv="X-UA-Compatible" content="chrome=1,IE=edge" />
  <title>route</title>
  <script type="text/javascript" src="../../../../x3dom-include.js"></script>
</head>

<body style="background-color:white;">


  <div class="group">
    <!-- Use the same "x", "y", "width" and "height" attributes as SVG.
             Optionally support the "viewBox" and "preserveAspectRatio" just like SVG -->
    <X3D xmlns="http://www.web3d.org/specifications/x3d-namespace" id="x3d" showLog='false' x="0px" y="0px"
      width="500px" height="500px">
      <Scene DEF='scene'>
        <Viewpoint position='16.0328 13.056 34.2417' orientation='-0.624839 0.780206 0.0292506 0.543473' zNear="0.5"
          zFar="5000"></Viewpoint>
        <Background skyColor='1 1 1'></Background>
        <DirectionalLight direction="-0.4 -0.9 0.3" intensity="0.5" shadowIntensity="0.0"></DirectionalLight>
        <Transform scale='2.5 2.5 2.5'>
          <Shape DEF='CUBE1'>
            <Appearance>
              <Material specularColor='.2 .2 .2'></Material>
              <ImageTexture url='./x3d_256.jpg'></ImageTexture>
            </Appearance>
            <Box></Box>
          </Shape>
          <Transform DEF='XFORM0a' center='0 0 10' class='bbox' bboxDisplay='true' bboxColor='1, 0.25, 0'>
            <Shape USE='CUBE1'></Shape>
          </Transform>
          <Transform DEF='XFORM0b' center='0 7 7'>
            <TouchSensor DEF='touch'></TouchSensor>
            <Shape DEF='CUBE2' bboxDisplay='true' class='bbox'>
              <Appearance>
                <Material specularColor='.2 .2 .2'></Material>
                <ImageTexture url='./webgl_256.jpg'></ImageTexture>
              </Appearance>
              <Box></Box>
            </Shape>
          </Transform>
          <Transform DEF='XFORM0c' center='10 0 0'>
            <Shape DEF='CUBE3'>
              <Appearance>
                <Material specularColor='.2 .2 .2'></Material>
                <ImageTexture url='./w3c_256.jpg'></ImageTexture>
              </Appearance>
              <Box></Box>
            </Shape>
          </Transform>
          <Transform DEF='XFORM0d' center='0 10 0'>
            <Shape DEF='CUBE4'>
              <Appearance>
                <Material specularColor='.2 .2 .2'></Material>
                <ImageTexture url='./web3d_256.jpg'></ImageTexture>
              </Appearance>
              <Box></Box>
            </Shape>
          </Transform>
          <Transform DEF='XFORM1a'>
            <Transform USE='XFORM0a'></Transform>
            <Transform USE='XFORM0b'></Transform>
            <Transform USE='XFORM0c'></Transform>
            <Transform USE='XFORM0d'></Transform>
          </Transform>
          <Transform DEF='XFORM1b' visible='false' bboxDisplay='false'>
            <Transform USE='XFORM0a'></Transform>
            <Transform USE='XFORM0b'></Transform>
            <Transform USE='XFORM0c'></Transform>
            <Transform USE='XFORM0d'></Transform>
          </Transform>
          <Transform DEF='XFORM1c'>
            <Transform USE='XFORM0a'></Transform>
            <Transform USE='XFORM0b'></Transform>
            <Transform USE='XFORM0c'></Transform>
            <Transform USE='XFORM0d'></Transform>
          </Transform>
          <Transform DEF='XFORM1d'>
            <Transform USE='XFORM0a'></Transform>
            <Transform USE='XFORM0b'></Transform>
            <Transform USE='XFORM0c'></Transform>
            <Transform USE='XFORM0d'></Transform>
          </Transform>
          <Transform DEF='XFORM2a'>
            <Transform USE='XFORM1a'></Transform>
            <Transform USE='XFORM1b'></Transform>
            <Transform USE='XFORM1c'></Transform>
            <Transform USE='XFORM1d'></Transform>
          </Transform>
          <Transform DEF='XFORM2b'>
            <Transform USE='XFORM1a'></Transform>
            <Transform USE='XFORM1b'></Transform>
            <Transform USE='XFORM1c'></Transform>
            <Transform USE='XFORM1d'></Transform>
          </Transform>
          <Transform DEF='XFORM2c'>
            <Transform USE='XFORM1a'></Transform>
            <Transform USE='XFORM1b'></Transform>
            <Transform USE='XFORM1c'></Transform>
            <Transform USE='XFORM1d'></Transform>
          </Transform>
          <Transform DEF='XFORM2d'>
            <Transform USE='XFORM1a'></Transform>
            <Transform USE='XFORM1b'></Transform>
            <Transform USE='XFORM1c'></Transform>
            <Transform USE='XFORM1d'></Transform>
          </Transform>
        </Transform>
        <Transform DEF='TREE'>
          <Transform USE='XFORM2a'></Transform>
          <Transform USE='XFORM2b'></Transform>
          <Transform USE='XFORM2c'></Transform>
          <Transform USE='XFORM2d'></Transform>
        </Transform>

        <TimeSensor DEF='TS' loop='true' cycleInterval='20'></TimeSensor>

        <OrientationInterpolator id="rotorA" DEF='ROTOR_A' key='0 0.5 1' keyValue='1 0 0 0, 1 0 0 3.14, 1 0 0 6.28'>
        </OrientationInterpolator>
        <OrientationInterpolator id="rotorB" DEF='ROTOR_B' key='0 0.5 1' keyValue='0 1 0 0, 0 1 0 3.14, 0 1 0 6.28'>
        </OrientationInterpolator>
        <OrientationInterpolator id="rotorC" DEF='ROTOR_C' key='0 0.5 1' keyValue='0 0 1 0, 0 0 1 3.14, 0 0 1 6.28'>
        </OrientationInterpolator>
        <OrientationInterpolator id="rotorD" DEF='ROTOR_D' key='0 0.5 1'
          keyValue='0.707 0 0.707 0, 0.707 0 0.707 3.14, 0.707 0 0.707 6.28'></OrientationInterpolator>

        <ROUTE fromNode='TS' fromField='fraction_changed' toNode='ROTOR_A' toField='set_fraction'></ROUTE>
        <ROUTE fromNode='TS' fromField='fraction_changed' toNode='ROTOR_B' toField='set_fraction'></ROUTE>
        <ROUTE fromNode='TS' fromField='fraction_changed' toNode='ROTOR_C' toField='set_fraction'></ROUTE>
        <ROUTE fromNode='TS' fromField='fraction_changed' toNode='ROTOR_D' toField='set_fraction'></ROUTE>

        <ROUTE fromNode='ROTOR_A' fromField='value_changed' toNode='XFORM0a' toField='rotation'></ROUTE>
        <ROUTE fromNode='ROTOR_A' fromField='value_changed' toNode='XFORM1a' toField='rotation'></ROUTE>
        <ROUTE fromNode='ROTOR_A' fromField='value_changed' toNode='XFORM2a' toField='rotation'></ROUTE>
        <ROUTE fromNode='ROTOR_B' fromField='value_changed' toNode='XFORM0b' toField='rotation'></ROUTE>
        <ROUTE fromNode='ROTOR_B' fromField='value_changed' toNode='XFORM1b' toField='rotation'></ROUTE>
        <ROUTE fromNode='ROTOR_B' fromField='value_changed' toNode='XFORM2b' toField='rotation'></ROUTE>
        <ROUTE fromNode='ROTOR_C' fromField='value_changed' toNode='XFORM0c' toField='rotation'></ROUTE>
        <ROUTE fromNode='ROTOR_C' fromField='value_changed' toNode='XFORM1c' toField='rotation'></ROUTE>
        <ROUTE fromNode='ROTOR_C' fromField='value_changed' toNode='XFORM2c' toField='rotation'></ROUTE>
        <ROUTE fromNode='ROTOR_D' fromField='value_changed' toNode='XFORM0d' toField='rotation'></ROUTE>
        <ROUTE fromNode='ROTOR_D' fromField='value_changed' toNode='XFORM1d' toField='rotation'></ROUTE>
        <ROUTE fromNode='ROTOR_D' fromField='value_changed' toNode='XFORM2d' toField='rotation'></ROUTE>

        <ROUTE fromNode='touch' fromField='isOver' toNode='CUBE2' toField='bboxDisplay'></ROUTE>

      </Scene>
    </X3D>
  </div>

  <script type="text/javascript">
    var shadows = false;
    var frac = 0;
    var bboxes = true;

    function toggleShadows() {
      var button = document.getElementById("shadow");

      shadows = !shadows;

      if (shadows)
        button.value = "Disable Shadows";
      else
        button.value = "Enable Shadows";

      var mat = document.getElementsByTagName("DirectionalLight");

      mat[0].setAttribute("shadowIntensity", (shadows ? "0.5" : "0.0"));

      return false;
    }

    function rotor() {
      frac += 0.1;
      frac %= 1.0;
      document.getElementById('rotorA').setAttribute('set_fraction', frac);
      document.getElementById('rotorB').setAttribute('set_fraction', frac);
      document.getElementById('rotorC').setAttribute('set_fraction', frac);
      document.getElementById('rotorD').setAttribute('set_fraction', frac);
    }
    function toggleBBoxes(event) {
      bboxes = !bboxes;
      if (bboxes) event.target.value = "disable bounding boxes";
      if (!bboxes) event.target.value = "enable bounding boxes";
      document.querySelectorAll('.bbox').forEach((n) => n.setAttribute("bboxDisplay", bboxes));
    }
  </script>

  <div class="group">
    <!--input type="button" id="shadow" value="Enable Shadows" onclick="toggleShadows();" /-->
    <!--input type="button" value="rotor" onclick="rotor()" /-->
    <input type="button" value="disable bounding boxes" onclick="toggleBBoxes(event)" />
  </div>

</body>

</html>